<template>
  <div>
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <div class="top-fl">
          <el-form-item label="">
            <el-input
              size="medium"
              v-model="formInline.username"
              placeholder="用户账号"
              style="min-width: 19vw"
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select
              clearable
              v-model="formInline.type"
              placeholder="角色类型"
              style="min-width: 19vw; padding: 0px 0px 0px 10px"
              size="medium"
            >
              <el-option label="管理员" :value="1"></el-option>
              <el-option label="普通用户" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-date-picker
            v-model="formInline.createDt"
            type="daterange"
            style="min-width: 19vw"
            align="right"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>

          <el-form-item>
            <el-button
              style="margin-left: 20px"
              type="primary"
              @click="onSubmit"
              size="medium"
              icon="el-icon-search"
              >查 询</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="min">
      <el-tabs type="border-card">
        <el-tab-pane label="用户管理"
          ><el-table
            :data="tableData"
            style="width: 100%"
            :border="true"
            stripe
            v-loading="loading"
          >
            <el-table-column
              label="序号"
              type="index"
              width="50"
              align="center"
            >
            </el-table-column>
            <el-table-column label="登录账户" align="center" prop="username">
            </el-table-column>
            <el-table-column
              label="角色类型"
              clearable
              align="center"
              prop="type"
              :formatter="types"
            >
            </el-table-column>
            <el-table-column label="邮箱" align="center" prop="email">
            </el-table-column>
            <el-table-column
              label="登录时间"
              align="center"
              prop="createtime"
              :formatter="time"
            >
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  style="width: 100px"
                  >删除记录</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="pagebox">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination></div
        ></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
  <script>
import moment from "moment";
export default {
  data() {
    return {
      loading: false,
      currentPage: 1, // 当前页码
      pagesize: 10, // 每页条数
      total: 0,
      value1: "",
      value2: "",
      value3: "",
      formInline: {},
      tableData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 搜索按钮
    async onSubmit() {
      this.loading = true;
      this.pass = true;
      if (this.formInline.createDt == null) {
        this.formInline.createDt = "";
      }
      if (this.formInline.type == null) {
        this.formInline.value = "";
      }
      if (this.formInline.createDt) {
        this.formInline.createDt[0] = moment(
          this.formInline.createDt[0]
        ).format("YYYY-MM-DD 00:00:00");
        this.formInline.createDt[1] = moment(
          this.formInline.createDt[1]
        ).format("YYYY-MM-DD 23:59:59");
        console.log(this.formInline.createDt);
      }
      console.log(this.formInline);
      //   console.log("submit!");
      await this.$axios.get("/users/getLoginData", {
          params: {
            username: this.formInline.username,
            type: this.formInline.type,
            startDate: this.formInline.createDt[0],
            endDate: this.formInline.createDt[1],
            currPage: this.currentPage - 1,
            pageNum: this.pagesize,
          },
        })
        .then((res) => {
          this.loading = false;
          console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
    // 数据接口
    // 表格数据
    async getList() {
      this.loading = true;
      await this.$axios
        .get("/users/getLoginData", {
          params: {
            username: "",
            type: "",
            startDate: "",
            endDate: "",
            pageNum: this.pagesize,
            currPage: this.currentPage - 1,
          },
        })
        .then((res) => {
          this.total = res.data.total;
          this.tableData = res.data.data;
          this.loading = false;
          // console.log(this.tableData);
        });
    },
    // 归档删除
    handleDelete(row, res) {
      // console.log(res.id);
      // console.log(sessionStorage.getItem('token'));
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.del(res.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async del(id) {
      await this.$axios
        .get("/users/delLoginData", {
          params: {
            id: id,
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        });
    },
    // 数据处理==================
    handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      this.pagesize = val;
      if (
        this.formInline.communityname ||
        this.formInline.unitname ||
        this.formInline.createDt ||
        this.formInline.value
      ) {
        this.onSubmit();
      } else {
        this.getList();
      }
    },
    handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      this.currentPage = val;
      if (
        this.formInline.communityname ||
        this.formInline.unitname ||
        this.formInline.createDt ||
        this.formInline.value
      ) {
        this.onSubmit();
      } else {
        this.getList();
      }
    },
    // 页面跳转
    types(val) {
      // console.log(val);
      if (val.type == 1) {
        return "管理员";
      } else {
        return "普通用户";
      }
    },
    time(a, b, c) {
      return moment(c).format("YYYY-MM-DD HH:mm:ss");
    },
  },
};
</script>
  <style scoped>
.top {
  width: 100%;
  overflow: hidden;
}
.top-fl {
  width: 100%;
  height: 40px;
  display: flex;
  /* justify-content: space-between;
    align-items: flex-start */
}
/* 使用深度选择器 */
::v-deep .el-table .has-gutter tr th {
  background: rgb(238, 241, 246);
  color: rgb(31, 45, 61);
  border-color: rgb(223, 230, 236);
  font-size: 14px;
  text-align: center;
}
.min {
  width: 100%;
  margin-top: 10px;
}
.pagebox {
  margin-top: 10px;
  display: flex;
  justify-content: right;
}
</style>